<template>
  <div class="toolbar">
    <div class="filters">
      <a-select v-if="showCategory" :value="categoryId" placeholder="分类" allow-clear style="min-width: 140px" @change="onCategory">
        <a-select-option v-for="c in categories" :key="c.id" :value="c.id">{{ c.name }}</a-select-option>
      </a-select>
      <a-select v-if="showTag" :value="tagId" placeholder="标签" allow-clear style="min-width: 140px" @change="onTag">
        <a-select-option v-for="t in tags" :key="t.id" :value="t.id">{{ t.name }}</a-select-option>
      </a-select>
      <a-input-search v-if="showKeyword"
        :value="keyword"
        placeholder="搜索标题/摘要"
        enter-button
        @search="onSearch"
        allow-clear
        style="flex:1"
      />
      <a-segmented v-if="showSort && sortOptions && sortOptions.length" style="margin-left:8px" :value="sortBy" :options="sortOptions" @change="onSort" />
      <slot />
    </div>
  </div>
</template>

<script setup lang="ts">
import type { CategoryVO, TagVO } from '@/types/api'

const props = withDefaults(defineProps<{
  categories?: CategoryVO[]
  tags?: TagVO[]
  categoryId?: number
  tagId?: number
  keyword?: string
  sortBy?: 'latest' | 'views' | 'likes' | 'comments'
  sortOptions?: { label: string; value: any }[]
  showCategory?: boolean
  showTag?: boolean
  showKeyword?: boolean
  showSort?: boolean
}>(), {
  categories: () => [],
  tags: () => [],
  sortOptions: () => [],
  showCategory: true,
  showTag: true,
  showKeyword: true,
  showSort: true
})

const emit = defineEmits<{
  (e: 'update:categoryId', v?: number): void
  (e: 'update:tagId', v?: number): void
  (e: 'update:keyword', v?: string): void
  (e: 'update:sortBy', v: 'latest' | 'views' | 'likes' | 'comments'): void
  (e: 'change'): void
  (e: 'search'): void
}>()

function onCategory(v?: number) { emit('update:categoryId', v as any); emit('change') }
function onTag(v?: number) { emit('update:tagId', v as any); emit('change') }
function onSearch(v?: string) { emit('update:keyword', (v || '').trim()); emit('search') }
function onSort(v: any) { emit('update:sortBy', v); emit('change') }
</script>

<style scoped>
.toolbar { margin-bottom: 12px; }
.filters { display: flex; gap: 8px; align-items: center; }
</style>


